import React, { useState } from 'react';
import {

  MenuFoldOutlined,
  MenuUnfoldOutlined,

  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Avatar, Breadcrumb, Button, Dropdown, Layout, Menu, theme } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { RouteItem } from '../type/route';
import { routes } from '../routes';

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [

  getItem('工作台', 'sub1', <UserOutlined />, [
    getItem('个人中心', '/admin/users'),
  ]),
  getItem('订单管理', '2', <UserOutlined />, [
    getItem('询价单管理', '/admin/xundanjia'),
    getItem('订单管理', '/admin/dingdan'),
  ]),
  getItem('运输管理', 'sub2', <UserOutlined />, [
    getItem('在途跟踪', '/admin/zaitu'),
  ]),
  getItem('合同管理', '/admin/hetong'),
  getItem('回单管理', '/admin/huidan'),
  getItem('结算管理', '/admin/jiesuan'),
  getItem('订单结算', '/admin/dingdanjiesuan', <UserOutlined />),
  getItem('发票管理', '/admin/fapiao'),
  getItem('系统设置', '/admin/dashboard'),
];

export default function MainLayout() {
  const location = useLocation();
  const routeMap = React.useMemo(() => {
    const map = new Map<string, string>();
    function createMap(routes: RouteItem[], parentPath = '') {
      routes.forEach(route => {
        const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/');
        if (route.name) map.set(fullPath, route.name);
        if (route.children) createMap(route.children, fullPath);
      });
    }
    createMap(routes);
    return map;
  }, []);

  // 生成面包屑项
  const breadcrumbItems = React.useMemo(() => {
    const pathSnippets = location.pathname.split('/').filter(i => i);
    return pathSnippets.map((_, index) => {
      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
      return {
        key: url,
        title: routeMap.get(url) || pathSnippets[index]
      };
    });
  }, [location.pathname, routeMap]);
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG, colorTextHeading }, // 添加colorTextHeading
  } = theme.useToken();
  //   左侧导航
  const navigate = useNavigate()
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
        style={{
          position: 'fixed',
          left: 0,
          top: 64,
          height: 'calc(100vh - 64px)',
          zIndex: 999,
        }}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          onClick={(e) => navigate(e.keyPath[0])}
          defaultSelectedKeys={['pathname']}
          mode="inline"
          items={items}
        />
      </Sider>

      <Layout style={{
        marginLeft: collapsed ? 80 : 200,
        transition: 'margin 0.2s',
      }}>
        <Header style={{
          position: 'fixed',
          zIndex: 1000,
          width: '100%',
          left: 0,
          top: 0,
          padding: '0 24px',
          background: colorBgContainer,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          height: 64,
          borderBottom: '1px solid rgba(0,0,0,0.06)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '18px',
                width: 64,
                height: 64,
              }}
            />
            <span style={{
              fontSize: 28,
              fontWeight: 600,
              color: colorTextHeading,
              lineHeight: '64px',



            }}>
              <img src="https://cdn8.axureshop.com/demo2024/2316038/images/1-%E8%B4%A6%E5%8F%B7%E5%AF%86%E7%A0%81%E7%99%BB%E5%BD%95/u18.svg" style={{ marginTop: '15px' }} alt="" />
              TMS客户端
            </span>
          </div>

          <Dropdown
            menu={{
              items: [
                { key: 'profile', label: '个人中心' },
                { key: 'logout', label: '退出登录' }
              ]
            }}
          >
            {/* 右侧用户信息区域 */}
            <div >
              <Avatar
                style={{ backgroundColor: '#1DA57E' }}
                icon={<UserOutlined />}
              />
              <span>管理员</span>
            </div>
          </Dropdown>
        </Header>
        <Content style={{
          margin: '16px 16px 0',
          paddingTop: 64,
        }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            {breadcrumbItems.map((item) => (
              <Breadcrumb.Item key={item.key}>{item.title}</Breadcrumb.Item>
            ))}
          </Breadcrumb>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          无敌组最强管理系统 ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

